<header class="{{this.baseHeaderClass}} entity-header wherehows-entity-header">
  <section class="{{this.baseHeaderClass}}__img-section">
    <NachoAvatar::NachoAvatarImage
      class="{{this.baseHeaderClass}}__profile-img"
      @img={{@entity.profilePictureUrl}}
      @alt={{@entity.name}}
    />
  </section>

  <section class="{{this.baseHeaderClass}}__detail-section">
    <div class="{{this.baseHeaderClass}}__user-profile">
      <div class="{{this.baseHeaderClass}}__name-container">
        <h3 class="{{this.baseHeaderClass}}__name">
          {{@entity.name}}
        </h3>

        {{#unless @isActive}}
          <NachoPill::NachoPill
            @class="{{this.baseHeaderClass}}__inactive-label"
            @text="Inactive"
            @state="alert"
          />
        {{/unless}}
      </div>

      {{#if @isCurrentUser}}
        <button
          type="button"
          class="{{this.baseHeaderClass}}__edit-profile nacho-button--secondary"
          {{action (mut this.isEditingProfile) true}}
        >
          Edit profile
        </button>
      {{/if}}
    </div>

    <h5 class="{{this.baseHeaderClass}}__job-title">
      {{@entity.title}}
    </h5>

    <div class="{{this.baseHeaderClass}}__user-details">
      <div class="{{this.baseHeaderClass}}__focus-area">
        <div class="{{this.baseHeaderClass}}__focus-area-content">
          <h5 class="{{this.baseHeaderClass}}__focus-area-title">ASK ME ABOUT</h5>
          <div class="{{this.baseHeaderClass}}__focus-area-skills">
            {{#each this.skillsPreview as |skill|}}
              <NachoPill::NachoPill
                @class="{{this.baseHeaderClass}}__tag"
                @text={{skill}}
                @state="neutral"
              />
            {{/each}}
            {{#if this.renderViewAllSkillsButton}}
              <button
                type="button"
                class="nacho-button nacho-button--tertiary view-all__button"
                {{action (mut this.isViewingAllSkills) true}}
              >
                View all
              </button>
            {{/if}}
          </div>
          {{@entity.focusArea}}
        </div>
      </div>

      <div class="{{this.baseHeaderClass}}__org">
        <div class="{{this.baseHeaderClass}}__team">
          <h5 class="{{this.baseHeaderClass}}__team-name">TEAM</h5>
          <div class="{{this.baseHeaderClass}}__team-tags">
            {{#each this.teamsPreview as |teamTag|}}
              <NachoPill::NachoPill
                @class="{{this.baseHeaderClass}}__tag"
                @text={{teamTag}}
                @state="neutral"
              />
            {{/each}}
            {{#if this.renderViewAllTeamsButton}}
              <button
                type="button"
                class="nacho-button nacho-button--tertiary view-all__button"
                {{action (mut this.isViewingAllTeams) true}}
              >
                View all
              </button>
            {{/if}}
          </div>
        </div>

        <div class="{{this.baseHeaderClass}}__manager">
          {{#if @entity.reportsTo}}
            <h5 class="{{this.baseHeaderClass}}__manager-name">MANAGER</h5>
            {{#let @entity.reportsTo as |manager|}}

              <LinkTo
                @route="user.profile"
                @model={{manager.urn}}
                class="{{this.baseHeaderClass}}__connection-link"
              >
                <NachoAvatar::NachoAvatarImage
                  class="{{this.baseHeaderClass}}__manager-img"
                  @img={{manager.profilePictureUrl}}
                  @alt={{manager.name}}
                />

                {{manager.name}}
              </LinkTo>

            {{/let}}
          {{/if}}
        </div>
      </div>
      <div class="{{this.baseHeaderClass}}__connections">
        <div class="{{this.baseHeaderClass}}__connection">
          <MailTo @mailHeader={{hash to=@entity.email}} class="{{this.baseHeaderClass}}__connection-link">
            <FaIcon
              @icon="envelope"
              class={{concat this.baseHeaderClass "__connection-icon"}}
              @prefix="far"
            />
            {{@entity.email}}
          </MailTo>
        </div>

        {{#if @headerProperties.isConnectedToLinkedin}}
          <div class="{{this.baseHeaderClass}}__connection">
            <a
              href={{@entity.linkedinProfile}}
              target="_blank"
              rel="noreferrer noopener"
              class="{{this.baseHeaderClass}}__connection-link"
            >
              <FaIcon
                class="{{this.baseHeaderClass}}__connection-icon"
                @prefix="fab"
                @icon="linkedin"
              />
              LinkedIn Profile
            </a>
          </div>
        {{/if}}

        {{#if @headerProperties.showExternalProfileLink}}

          <div class="{{this.baseHeaderClass}}__connection">
            <a
              href={{@entity.profileLink}}
              target="_blank"
              rel="noreferrer noopener"
              class="{{this.baseHeaderClass}}__connection-link"
            >
              <FaIcon
                @icon="linkedin"
                class={{concat this.baseHeaderClass "__connection-icon"}}
                @prefix="fab"
              />
              {{@headerProperties.externalProfileLinkText}}
            </a>
          </div>

        {{/if}}

        {{#if @headerProperties.isConnectedToSlack}}
          <div class="{{this.baseHeaderClass}}__connection">
            <FaIcon
              @icon="slack"
              class={{concat this.baseHeaderClass "__connection-icon"}}
              @prefix="fab"
            />
            Slack
          </div>
        {{/if}}
      </div>
    </div>
  </section>
</header>

{{#if this.isEditingProfile}}
  <User::Profile::InfoEditor
    @entity={{@entity}}
    @onCloseEditor={{action this.onCloseEditorModal}}
    @onSave={{@onSave}}
  />
{{/if}}

{{#if this.isViewingAllSkills}}
  <User::Profile::ViewAll
    @tags={{@entity.skills}}
    @title="Ask me about"
    @onCloseViewAll={{action this.onCloseViewAllSkillsModal}}
  />
{{/if}}

{{#if this.isViewingAllTeams}}
  <User::Profile::ViewAll
    @tags={{@entity.teamTags}}
    @title="Team"
    @onCloseViewAll={{action this.onCloseViewAllTeamsModal}}
  />
{{/if}}
